<template>
  <div>
    <!-- 自定义表单验证
          1：先实现基本表单验证
              a:值绑定
              b:el-form  model  rules
              c:el-form-item  prop
              d:规则
                 rules：{
                  prop的值:[
                     {required:true,message:'消息',trigger:'change/blur'},
                     {min:最小长度,max:最大长度,message:'消息',trigger:'change/blur'},
                     {pattern:正则,message:'消息',trigger:'change/blur'},
                  ]
                 }
          2：
             rules：{
                  prop的值:[
                     {required:true,message:'消息',trigger:'change/blur'},
                     {min:最小长度,max:最大长度,message:'消息',trigger:'change/blur'},
                     {pattern:正则,message:'消息',trigger:'change/blur'},
                     {validator:(rule,value,callback)=>{
                        rule:当前项的验证规则，一般不用
                        value：当前需要验证项的值
                        callback:回调函数
                            验证通过   callback()
                            验证不通过 callback(new Error(错误信息))
                     },trigger:'change/blur'}
                  ]
                 }
-->

    <el-form label-width="100px" :model="form" :rules="rules">
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input v-model="form.rePassword" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        password: '',
        rePassword: ''
      },
      rules: {
        password: [{ required: true, message: '必填', trigger: 'change' }],
        rePassword: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (this.form.password === value) {
                callback()
              } else {
                callback(new Error('请保证密码与确认密码相同'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  }
}
</script>
<style></style>
